<!-- -->
<template>
  <div class="public">
    <Header>
      <span>新房</span>
      <span slot="map"></span>
    </Header>

    <div class="con">
      <div class="screen">
        <!-- 下拉菜单 -->
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1">
            <div v-for="item in list" :key="item.id">
              <p>{{ item.name }}</p>
            </div>
          </van-dropdown-item>
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value3" :options="option3"></van-dropdown-item>

          <van-dropdown-item v-model="value4" :options="option4" class>
            <h3>排序</h3>
            <div class="li-one">
              <div v-for="item in one" :key="item.id">
                <van-tag
                  type="primary"
                  color="#000"
                  plain
                  size="large"
                  class="tag-border"
                >{{ item.name }}</van-tag>
              </div>
            </div>
            <h3>特色</h3>
            <div class="li-one">
              <div v-for="item in two" :key="item.id">
                <van-tag
                  type="primary"
                  color="#000"
                  plain
                  size="large"
                  class="tag-border"
                >{{ item.name }}</van-tag>
              </div>
            </div>
            <h3>状态</h3>
            <div class="li-one">
              <div v-for="item in three" :key="item.id">
                <van-tag
                  type="primary"
                  color="#000"
                  plain
                  size="large"
                  class="tag-border"
                >{{ item.name }}</van-tag>
              </div>
            </div>
            <h3>装修</h3>
            <div class="li-one">
              <div v-for="item in four" :key="item.id">
                <van-tag
                  type="primary"
                  color="#000"
                  plain
                  size="large"
                  class="tag-border"
                >{{ item.name }}</van-tag>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>

      <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="10">
        <div v-for="(v, i) in list" :key="i">
          <bm-circle
            :center="{ lng: v.longitude, lat: v.latitude }"
            :radius="circlePath.radius"
            stroke-color="#ccc"
            :stroke-opacity="0.5"
            :labelStyle="{ background: 'red', border: 'none' }"
            :stroke-weight="2"
            fillColor="#000"
            @lineupdate="updateCirclePath"
          ></bm-circle>
          <bm-label
            :content="v.name"
            :position="{ lng: v.longitude, lat: v.latitude }"
            :labelStyle="{ color: 'red', fontSize: '14px' }"
            title="Hover me"
          />
          <!-- <bm-label
            :content="v.name"
            :position="{ lng: 116.404, lat: 39.915 }"
            :labelStyle="{ color: 'red', fontSize: '24px' }"
            title="Hover me"
          />-->
        </div>
      </baidu-map>
    </div>
    <button></button>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import { getThreeCity } from "@/api";
import { log } from "util";
export default {
  // import引入到组件需要注入到对象中才能使用
  components: { Header },
  data() {
    // 这里存放数据
    return {
      list: [],
      circlePath: {
        radius: 2000
      },
      level: 2,
      one: [
        { name: "默认" },
        { name: "价格低到高" },
        { name: "价格高到低" },
        { name: "开盘时间较早" },
        { name: "开盘时间较晚" }
      ],
      two: [
        { name: "全部" },
        { name: "小户型" },
        { name: "低密居所" },
        { name: "旅游地产" },
        { name: "教育资源" },
        { name: "公园附近" },
        { name: "精装楼盘" },
        { name: "品牌楼盘" }
      ],
      three: [
        { name: "全部" },
        { name: "在售" },
        { name: "新盘" },
        { name: "尾盘" },
        { name: "售罄" },
        { name: "未开盘" }
      ],
      four: [
        { name: "全部" },
        { name: "毛胚" },
        { name: "简装" },
        { name: "精装" },
        { name: "豪装" }
      ],
      value: "",
      value1: 0,
      value2: "a",
      value3: "a",
      value4: "a",
      option1: [{ text: "区域", value: 0 }],
      option2: [
        { text: "价格", value: "a" },
        { text: "不限", value: "b" },
        { text: "5千以下", value: "c" },
        { text: "5千~1万", value: "e" },
        { text: "1万~2万", value: "f" }
      ],
      option3: [
        { text: "类型", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" }
      ],
      option4: [{ text: "更多", value: "a" }]
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter();
      this.circlePath.radius = e.target.getRadius();
    },

    // 获取所有level级城市数据
    getList() {
      getThreeCity({ level: this.level }).then(res => {
        this.list = res.data;
        console.log(this.list);
      });
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.con {
  width: 100%;
  flex: 1;
  height: 100%;
  overflow: auto;
}
.map {
  width: 100%;
  height: 100%;
}
.li-one {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  .tag-border {
    width: 130px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 0;
  }
  .van-tag--large {
    font-size: 18px;
  }
}
.van-popup {
  > h3 {
    padding-left: 10px;
  }
}
</style>
